import React, { useEffect, useRef, useState } from "react";
import * as echarts from "echarts";
import "echarts-liquidfill";
import styles from "../../assets/css/MedicalFrontline/MedicalEquipmentStatistics.module.css";
import { selectMedicalEquipmentStatisticsList } from "../../api/MedicalFrontline/MedicalEquipmentStatistics";
export default function MedicalEquipmentStatistics() {
  const [shadow, setShadow] = useState("");
  const [pie, setPie] = useState([]);
  const [liquidFillRef, setLiquidFillRef] = useState({});
  // 使用 useRef 钩子来引用 DOM 元素
  // 柱状图
  const charShadowRef = useRef(null);
  // 饼状图
  const charPieRef = useRef(null);
  // 水波图
  const charLiquidFillRef = useRef(null);
  // 水波图
  const Pie = () => {
    const dataArr = [];
    for (let i = 0; i < 150; i++) {
      if (i % 2 === 0) {
        dataArr.push({
          name: (i + 1).toString(),
          value: 50,
          itemStyle: {
            normal: {
              color: "#00AFFF",
              borderWidth: 0,
              borderColor: "rgba(0,0,0,0)",
            },
          },
        });
      } else {
        dataArr.push({
          name: (i + 1).toString(),
          value: 100,
          itemStyle: {
            normal: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
              borderColor: "rgba(0,0,0,0)",
            },
          },
        });
      }
    }
    return dataArr;
  };
  // 获取数据
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await selectMedicalEquipmentStatisticsList();
        if (res.code === 1) {
          console.log(res);
          setShadow(res.data.drugsdatas.weekChart);
          setPie(res.data.drugsdatas.yesterdayChart);
          setLiquidFillRef(res.data.drugsdatas.cursurplus);
        }
      } catch (err) {
        console.error(err);
      }
    };

    fetchData();
  }, []);
  // 使用 useEffect 钩子来初始化和更新 ECharts 实例
  useEffect(() => {
    if (shadow && pie && liquidFillRef) {
      // 柱状图
      const shadowChart = echarts.init(charShadowRef.current);
      shadowChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: shadow.type,
        },
        series: shadow.data.map((item) => ({
          name: item.name,
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: item.data,
        })),

        // {
        //   name: "无菌输液器",
        //   type: "bar",
        //   stack: "total",
        //   label: {
        //     show: true,
        //   },
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [120, 132, 101, 134, 90, 230, 210],
        // },
        // {
        //   name: "真空采血管",
        //   type: "bar",
        //   stack: "total",
        //   label: {
        //     show: true,
        //   },
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [220, 182, 191, 234, 290, 330, 310],
        // },
        // {
        //   name: "中心静脉导管（单腔）",
        //   type: "bar",
        //   stack: "total",
        //   label: {
        //     show: true,
        //   },
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [150, 212, 201, 154, 190, 330, 410],
        // },
        // {
        //   name: "无菌注射针",
        //   type: "bar",
        //   stack: "total",
        //   label: {
        //     show: true,
        //   },
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [820, 832, 901, 934, 1290, 1330, 1320],
        // },
        // {
        //   name: "灭菌脱脂棉球",
        //   type: "bar",
        //   stack: "total",
        //   label: {
        //     show: true,
        //   },
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [820, 832, 901, 934, 1290, 1330, 1320],
        // },
      });
      // 饼状图
      const PieChart = echarts.init(charPieRef.current);
      PieChart.setOption({
        legend: {
          top: "bottom",
          show: false,
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            // dataView: { show: true, readOnly: false },
            // restore: { show: true },
            // saveAsImage: { show: true },
          },
        },
        series: [
          {
            // name: "Nightingale Chart",
            type: "pie",
            radius: [30, 170],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: pie,
          },
        ],
      });
      // 水波图
      const liquidFillChart = echarts.init(charLiquidFillRef.current);
      liquidFillChart.setOption({
        series: [
          {
            // value: 50, //  内容 配合formatter
            type: "liquidFill",
            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
            center: ["50%", "50%"],
            data: [
              0.6,
              {
                value: 0.6,
                direction: "left", //波浪方向
              },
            ], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: "rgba(62, 208, 255, 1)", // 球体本景色
            },
            amplitude: "5%", //波浪的振幅
            // 修改波浪颜色
            // color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "#6CDEFC",
                  },
                  {
                    offset: 0,
                    color: "#429BF7",
                  },
                ],
                globalCoord: false,
              },
            ],
            label: {
              normal: {
                // formatter: 0.87 * 100 + '\n%',
                formatter: liquidFillRef * 100 + "\n{d|%}",
                //  formatter: function(params){
                //     return params.value* 100 + " \n%";
                // },
                rich: {
                  d: {
                    fontSize: 36,
                  },
                },
                textStyle: {
                  fontSize: 48,
                  color: "#fff",
                },
              },
            },
            outline: {
              show: false,
            },
          },
          {
            type: "pie",
            z: 1,
            center: ["50%", "50%"],
            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 500,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "#00AFFF",
                },
                emphasis: {
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: "#00AFFF",
                  },
                },
              },
            ],
          },
          {
            //外发光
            type: "pie",
            z: 1,
            zlevel: -1,
            radius: ["70%", "90.5%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                borderWidth: 20,
                color: "rgba(224, 242, 255, 0.73)",
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
          {
            //底层外发光
            type: "pie",
            z: 1,
            zlevel: -2,
            radius: ["70%", "100%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                borderWidth: 20,
                color: "rgba(224, 242, 255, 0.32)",
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
          {
            type: "pie",
            zlevel: 0,
            silent: true,
            radius: ["78%", "80%"],
            z: 1,
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: Pie(),
          },
        ],
      });
    }
    // console.log(liquidFillChart.setOption);
    // 组件卸载时，销毁 ECharts 实例
    return () => {
      // 柱状图
      if (charShadowRef.current) echarts.dispose(charShadowRef.current);
      // 饼状图
      if (charPieRef.current) echarts.dispose(charPieRef.current);
      // 水波图
      if (charLiquidFillRef.current) echarts.dispose(charLiquidFillRef.current);
    };
  }, [shadow, pie, liquidFillRef]);

  return (
    <div className={styles.bigBox}>
      <div className={styles.left}>
        <div style={{ fontWeight: "700", fontSize: "20px" }}>
          今日医疗器材库存
        </div>
        <div ref={charLiquidFillRef} className={styles.chartWater}></div>
        <div style={{ fontWeight: "700", fontSize: "20px" }}>
          昨日医疗器材消耗占比
        </div>
        <div ref={charPieRef} className={styles.chartPie}></div>
      </div>
      <div className={styles.right}>
        <div ref={charShadowRef} className={styles.chart}></div>
      </div>
    </div>
  );
}
